<template>
  <section class="monitor-contain">
    <div class="content-bty">
      <div class="item-box">
        <div class="item-box-pd">
          <img class="item-box-name" src="/src/assets/imgs/securityManage/one.png">
<!--          <video autoplay webkit-playsinline="true" playsinline controlsList="nodownload" object-fit="fill" poster="" speed="false" class="video-sty">
            <source src="https://tytest.gzvst.top/fanzhajlhsev/profile/upload/2023/03/10/1_20230310181632A003.mp4">
          </video>-->
          <video-play ref="videoMerge" :srcUrl="srcUrl" @playComplete="completePlay" class="video-sty"></video-play>
          <div class="people-content">
            <img src="/src/assets/imgs/securityManage/people.jpg">
            <div class="people-info">
              <a>姓名: 吴国强</a>
              <a>工作单位: 宁波某某有限公司</a>
              <a>联系方式: 13876492648</a>
              <a>抓拍时间: 2024-04-15(周三) 17:33:23</a>
              <a>抓拍原因: 离岗超过规定时间</a>
            </div>
            <div class="people-warn">
              <img src="/src/assets/imgs/warning.png">
              <span>二级</span>
            </div>
          </div>
          <div id="analyzeChart" style="width: 100%;height: 260px;margin: 10px 0;"></div>
          <div class="history-table">
            <div class="history-table-name">
              <span>姓名</span>
              <span>岗位</span>
              <span>违规时间</span>
            </div>
            <ul class="history-table-list">
              <li>
                <a>张三</a>
                <a>工程师</a>
                <a>2024-07-03 13:32</a>
              </li>
              <li>
                <a>张三</a>
                <a>工程师</a>
                <a>2024-07-03 13:32</a>
              </li>
              <li>
                <a>张三</a>
                <a>工程师</a>
                <a>2024-07-03 13:32</a>
              </li>
              <li>
                <a>张三</a>
                <a>工程师</a>
                <a>2024-07-03 13:32</a>
              </li>
              <li>
                <a>张三</a>
                <a>工程师</a>
                <a>2024-07-03 13:32</a>
              </li>
              <li>
                <a>张三</a>
                <a>工程师</a>
                <a>2024-07-03 13:32</a>
              </li>
              <li>
                <a>张三</a>
                <a>工程师</a>
                <a>2024-07-03 13:32</a>
              </li>
              <li>
                <a>张三</a>
                <a>工程师</a>
                <a>2024-07-03 13:32</a>
              </li>
              <li>
                <a>张三</a>
                <a>工程师</a>
                <a>2024-07-03 13:32</a>
              </li>
              <li>
                <a>张三</a>
                <a>工程师</a>
                <a>2024-07-03 13:32</a>
              </li>
              <li>
                <a>张三</a>
                <a>工程师</a>
                <a>2024-07-03 13:32</a>
              </li>
              <li>
                <a>张三</a>
                <a>工程师</a>
                <a>2024-07-03 13:32</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts" name="PersonMonitor">
import {reactive, onMounted, ref, getCurrentInstance, nextTick, computed, onUnmounted, onBeforeUnmount} from "vue";
import VideoPlay from "../../components/video/index.vue";

const { proxy } = getCurrentInstance()
const videoMerge = ref(null)
const srcUrl = ref("http://115.238.130.30:20003/rtp/33021100492000000008_33021101581314000002.live.mp4")
const datalist = [
  {
    name: '离岗超时',
    value: 8,
    itemStyle: {
      // opacity: 1,
      color: '#00B9FF',
    }
  }, /*{
    name: '未带安全帽',
    value: 2,
    itemStyle: {
      // opacity: 1,
      color: '#00C4E1'
    }
  }*/]

const completePlay = () => {
  let videoElement = videoMerge.value.$refs.videoPlayer;
  // videoElement.play()
}

const monthChart = () => {
  const echarts = proxy.$ECharts
  const echarts1 = echarts.init(document.getElementById("analyzeChart"))

  const option = {
    tooltip: {
      show: true,
      trigger: 'axis',
      // axisPointer: {
      //   type: 'cross',
      //   label: {
      //     backgroundColor: '#6a7985'
      //   }
      // },
      formatter:e=>{
        console.log("e", e)
        return `
            <div style="font-family: fangzheng">
                <div style="color: #333333;font-size: 15px;">${e[0].name}抓拍详情</div>
                <div style="margin: 10px 0 5px 0;">
                    <img src="/src/assets/imgs/marker3.png" style="width: 12px;height: 12px;">
                    <span style="color: #333333;">离岗超时:</span>
                    <a style="color: #666666;">${e[0].data.value}</a><br/>
                </div>
            </div>
	          `
      }
    },
    grid: {
      top: '14%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    backgroundColor: 'rgba(213,208,208,0.3)',
    xAxis: [
      {
        type: 'category',
        nameLocation: 'middle',
        boundaryGap: false,
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
        axisLine: {
          show: true,
          lineStyle: {
            color: '#3549AA'
          }
        },
        axisLabel: {
          color: '#3549AA'
        },
        splitLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        name: '(件)',
        type: 'value',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#3549AA'
          }
        },
        axisLabel: {
          color: '#3549AA',
          // formatter: '{value}件'
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '未带安全帽',
        type: 'line',
        // stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 3,
          color: '#3549AA'
        },
        showSymbol: false,
        /*        areaStyle: {
                  opacity: 0.8,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: 'rgb(0, 221, 255)'
                    },
                    {
                      offset: 1,
                      color: 'rgb(77, 119, 255)'
                    }
                  ])
                },*/
        emphasis: {
          focus: 'series'
        },
        data: [
          {
            value1: 120,
            value: 330
          },
          {
            value1: 282,
            value: 402
          },
          {
            value1: 111,
            value: 181
          },
          {
            value1: 178,
            value: 503
          },
          {
            value1: 220,
            value: 404
          },
          {
            value1: 340,
            value: 449
          },
          {
            value1: 310,
            value2: 269,
            value: 579
          }
        ]
      },
    ]
  };
  echarts1.setOption(option)

  onBeforeUnmount(() => {
    echarts1.dispose(); // 在组件销毁前手动销毁图表实例
  });
}


onMounted(() => {
  proxy?.$hooks.usePostMessage(
      {
        funcName: ['useAIPeopleMonitor'],
      }
  )

  monthChart()
})

onUnmounted(() => {
  proxy?.$hooks.usePostMessage(
      {
        funcName: ['useRemoveAIPeopleMonitor'],
      }
  )

})
</script>

<style scoped lang="scss">
.monitor-contain {
  height: 100%;
  width: 100%;
  position: relative;
  margin-right: 10%;
  //background: linear-gradient(to left, rgba(140, 235, 252, 0.4), rgba(36, 214, 245, 0));
  color: #ffffff;
  font-family: fangzheng;

  .content-bty {
    width: 100%;
    height: 90%;
    position: absolute;
    top: 7%;
    right: 9%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    margin-right: 15px;

    .item-box {
      margin-bottom: 15px;
      //background: url("@/assets/imgs/securityManage/rectangle.png") no-repeat center;
      //background: linear-gradient(to left, rgba(93, 122, 164, 0.5), rgba(145, 177, 224, 0.16));
      background-size: inherit;
      width: 460px;


      &::before {
        content: ' ';
        background: url("@/assets/images/box-left-long.png") no-repeat center;
        width: 40px;
        height: 100%;
        background-size: contain;
        position: absolute;
        z-index: 100;
        left: -20px;
        top: 0;
      }

      &::after {
        content: ' ';
        background: url("@/assets/images/box-right-long.png") no-repeat center;
        width: 40px;
        height: 100%;
        background-size: contain;
        position: absolute;
        z-index: 100;
        right: -20px;
        top: 0;
      }

      .item-box-name {
        width: 90%;
      }

      .item-box-pd {
        width: 100%;
        text-align: center;
        //padding: 10px 15px;
      }
    }

    .video-sty {
      width: 100%;
      height: 200px;
      object-fit: fill;
    }

    .people-content {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 5px;
      position: relative;
      padding: 10px;
      background: url("@/assets/imgs/tencelgy.png") no-repeat center;
      background-size: contain;

      img {
        width: 100px;
        height: 110px;
        object-fit: fill;
      }

      .people-info {
        display: inherit;
        align-items: flex-start;
        justify-content: inherit;
        flex-direction: column;
        margin-left: 5px;
      }

      .people-warn {
        position: absolute;
        right: 12px;
        top: 12px;

        img {
          width: 13px;
          height: 12px;
        }

        & > span {
          font-size: 14px;
          color: #FF8A1F;
          margin-left: 2px;
        }
      }
    }

    .history {

    }

    .history-table {
      width: 100%;

      .history-table-name {
        display: flex;
        flex-direction: row;
        align-items: center;
        background: rgba(0,64,175,0.8);
        padding: 2px 5px;
        font-size: 16px;

        span {
          word-wrap: break-word;
        }
        span:nth-child(1) {
          flex: 0 0 20%;
        }
        span:nth-child(2) {
          flex: 0 0 48%;
        }
        span:nth-child(3) {
          flex: 0 0 32%;
        }
      }

      .history-table-list {
        width: 100%;
        height: 300px;
        overflow-y: auto;

        li {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
        }

        li > a {
          word-wrap: break-word;
          //margin: 2px 0;
        }
        li > a:nth-child(1) {
          flex: 0 0 20%;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        li > a:nth-child(2) {
          flex: 0 0 48%;
        }
        li > a:nth-child(3) {
          flex: 0 0 32%;
        }
      }
    }

    .anylsis {
      display: flex;
      align-items: center;
      justify-content: center;

      .anylsis-cahrt {

      }
    }
  }
}
</style>
